<!DOCTYPE HTML>
<html>
<head>
<!--    <link rel="stylesheet" href="/public/css/style.css" type="text/css" media="screen">-->
<!--    <script type="text/javascript" src="/public/js/jquery-1.8.3.min.js"></script>-->
<!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
<style>
    .centered {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -80px;
        margin-left: -150px;
    }
    .login {
        width: 300px;
        height: 200px;
        background-color: #ffffff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 2px solid #E6E6E6;
        -moz-box-shadow: 10px 10px 0px 0px #ccc;
        -webkit-box-shadow: 10px 10px 0px 0px #ccc;
        box-shadow: 10px 10px 0px 0px #ccc;
        padding: 0px 0px 0px 5px;

    }

    .blue_line {
        height: 1px;
        background-color: #0070e4;
        width: 95%;
    }


    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .frm_label {
        padding: 5px 5px 3px 35px;
    }

    .frm_element {
        padding: 5px 5px 3px 5px;
    }

        /*button*/
    .btnhalfroundleft, .btnhalfroundleft span {
        display: inline-block;
        -webkit-border-radius: 0px 4px 4px 0px;
        -moz-border-radius: 0px 4px 4px 0px;
        border-radius: 0px 4px 4px 0px;
    }

    .button, .button span {
        display: inline-block;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .button, .btnhalfroundleft {
        white-space: nowrap;
        line-height: 1em;
        position: relative;
        outline: none;
        overflow: visible; /* removes extra side padding in IE */
        cursor: pointer;
        border: 1px solid #999; /* IE */
        border: rgba(0, 0, 0, .2) 1px solid; /* Saf4+, Chrome, FF3.6 */
        border-bottom: rgba(0, 0, 0, .4) 1px solid;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        background: -moz-linear-gradient(center top, rgba(255, 255, 255, .1) 0%, rgba(0, 0, 0, .1) 100%); /* FF3.6 */
        background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, .1)), to(rgba(255, 255, 255, .1))); /* Saf4+, Chrome */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#19FFFFFF', EndColorStr = '#19000000'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
        -moz-user-select: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        /*margin-bottom:10px;*/
    }

    .button.full, .button.full span {
        display: block;
    }

    .button:hover, .button.hover, .btnhalfroundleft:hover, .btnhalfroundleft.hover {
        background: -moz-linear-gradient(center top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%); /* FF3.6 */
        background: -webkit-gradient(linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .2))); /* Saf4+, Chrome */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#33FFFFFF', EndColorStr = '#19FFFFFF'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
    }

    .button:active, .button.active, .btnhalfroundleft:active, .btnhalfroundleft.active {
        top: 1px;
    }

    .button span, .btnhalfroundleft span {
        position: relative;
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
        border-top: rgba(255, 255, 255, .2) 1px solid;
        padding: 0.5em 0.5em;
        line-height: 1em;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
    }

    .button.small span, .btnhalfroundleft.small span {
        font-size: 12px;
    }

    .button.medium span, .btnhalfroundleft.medium span {
        font-size: 14px;
    }

    .button.large span, .btnhalfroundleft.large span {
        font-size: 18px;
    }

    .button.black, .btnhalfroundleft.black {
        background-color: #333333;
    }

    .button.gray, .btnhalfroundleft.gray {
        background-color: #666666;
    }

    .button.white, .btnhalfroundleft.white {
        background-color: #FFFFFF;
    }

    .button.white span, .btnhalfroundleft.white span {
        color: #666666;
    }

    .button.red, .btnhalfroundleft.red {
        background-color: #e62727;
    }

    .button.orange, .btnhalfroundleft.orange {
        background-color: #ff5c00;
    }

    .button.magenta, .btnhalfroundleft.magenta {
        background-color: #A9014B;
    }

    .button.yellow, .btnhalfroundleft.yellow {
        background-color: #ffb515;
    }

    .button.blue, .btnhalfroundleft.blue {
        background-color: #00ADEE;
    }

    .button.pink, .btnhalfroundleft.pink {
        background-color: #e22092;
    }

    .button.green, .btnhalfroundleft.green {
        background-color: #91bd09;
    }

    .button.rosy, .btnhalfroundleft.rosy {
        background-color: #F16C7C;
    }

    .button.brown, .btnhalfroundleft.brown {
        background-color: #804000;
    }

    .button.purple, .btnhalfroundleft.purple {
        background-color: #800080;
    }

    .button.cyan, .btnhalfroundleft.cyan {
        background-color: #46C7C7;
    }

    .button.gold, .btnhalfroundleft.gold {
        background-color: #D4A017;
    }

    .clear {
        clear: both;
    }
</style>
</head>


<body>
<div class="centered login" id="container">
    <div style="height:25px; padding: 5px 0px 5px 20px">Đăng nhập</div>
    <div class="blue_line"></div>
    <form action="/admin/login/login" name="frmLogin" id="frmLogin" method="post">
        <div style="padding: 10px 0px 10px 0px">

            <div>
                <div style="width:90px;" class="fl frm_label">Tên đăng nhập</div>
                <div style="width:90px;" class="fl frm_element"><input id="txtName" name="txtName"/></div>

            </div>
            <div class="clear"></div>
            <div>
                <div style="width:90px;" class="fl frm_label">Mật khẩu</div>
                <div style="width:90px;" class="fl frm_element"><input type="password" id="txtPassword"
                                                                       name="txtPassword"/></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="blue_line"></div>
        <div style="padding: 10px 20px 10px 20px" align="right">
            <a href="javascript:submitForm();" class="button small blue"><span>Đăng nhập</span></a>
        </div>
    </form>

</div>

</body>
</html>
<script type="text/javascript">
    function submitForm() {
        document.forms["frmLogin"].submit();
    }

    $("#txtPassword").keypress(function(event) {
        if ( event.which == 13 ) {
            submitForm();
            event.preventDefault();
        }
    });
</script>